import React from 'react'
import { connect } from 'react-redux'
import { Col, Form, Input, Modal, Row } from 'antd'
import PubSub from 'pubsub-js'
import { PASSWORD_RESET } from '../constant'
import './index.less'
import { getUInfo } from '../../../session/session'
import { CheckOutlined } from '@ant-design/icons'
import { changePassword } from '../../action/action'
import { exitLogin } from '../../../public/isLogin'

const FormItem = Form.Item
const formItemLayout = {
  labelCol: {
    xs: { span: 18, pull: 1 },
    sm: { span: 5, pull: 1 },
  },
  wrapperCol: {
    xs: { span: 18, },
    sm: { span: 11, },
  },
}

class PasswordReset extends React.PureComponent {
  form = React.createRef()

  constructor (props) {
    super(props)
    this.state = {
      visible: false,
      iconVisible: false
    }
  }

  componentDidMount () {
//订阅的事件
    this.pubsub_token = []
    this.pubsub_token.push(PubSub.subscribe(PASSWORD_RESET, this.showModal))
  }

  showModal = () => {
    this.setState({
      visible: true
    })
  }
  onCancel = () => {
    this.setState({
      visible: false
    })
  }
  onOk = () => {
    const { readerId } = JSON.parse(getUInfo())
    const { dispatch } = this.props
    this.form.current.validateFields().then(values => {
      const { passwordNew2 } = values
      dispatch(changePassword({ username: readerId, password: passwordNew2 })).then(() => {
        // 跳转到登录页面
        exitLogin()
      })
    })

  }
  validateTest = () => {
    return new Promise((resolve, reject) => {
      const passwordNew = this.form.current.getFieldValue('passwordNew')
      const passwordNew2 = this.form.current.getFieldValue('passwordNew2')
      if (passwordNew !== passwordNew2) {
        reject('两次密码输入不一致，请重新输入')
      }
      resolve()
    })
  }
  testPW = () => {
    const { password } = JSON.parse(getUInfo())
    return new Promise((resolve, reject) => {
      const passwordOld = this.form.current.getFieldValue('password')
      if (passwordOld === '') {
        reject('密码不能为空')
        this.setState({
          iconVisible: false
        })
      }
      if (passwordOld !== password) {
        reject('密码输入错误')
        this.setState({
          iconVisible: false
        })
      } else {
        resolve()
        this.setState({
          iconVisible: true
        })
      }

    })
  }

  render () {
    const { visible, iconVisible } = this.state
    return (
      <Modal
        title="修改密码"
        width="600px"
        open={visible}
        maskClosable={false}
        onCancel={this.onCancel}
        onOk={this.onOk}
        cancelText={'取消'}
        okText={'确认'}
        className={'pr-height'}
      >
        <Form ref={this.form}>
          <Row justify="start">
            <Col span={23}>
              <FormItem {...formItemLayout} label="旧密码"
                        name="password"
                        rules={[
                          // { required: true, message: '旧密码不能为空' },
                          { validator: this.testPW }
                        ]}
                        validateTrigger={'onBlur'}
                        validateFirst={true}
              >
                <Input autoComplete="off"
                       suffix={iconVisible ? <CheckOutlined style={{ color: 'green' }}/> : ''}
                       style={{ width: '300px', backgroundColor: '#fff', border: '1px solid #96c1e8' }}/>
              </FormItem>
            </Col>
          </Row>
          <Row justify="start">
            <Col span={23}>
              <FormItem {...formItemLayout} label="新密码"
                        name="passwordNew"
                        rules={[
                          { required: true, message: '新密码不能为空' },
                        ]}
                        validateTrigger={'onBlur'}
                        validateFirst={true}
              >
                <Input.Password autoComplete="off"
                                style={{ width: '300px', backgroundColor: '#fff', border: '1px solid #96c1e8' }}/>
              </FormItem>
            </Col>
          </Row>
          <Row justify="start">
            <Col span={23}>
              <FormItem {...formItemLayout} label="再次输入"
                        name="passwordNew2"
                        validateTrigger={'onBlur'}
                        validateFirst={true}
                        rules={[
                          { required: true, message: '新密码不能为空' },
                          { validator: this.validateTest }
                        ]}
              >
                <Input.Password autoComplete="off"
                                style={{ width: '300px', backgroundColor: '#fff', border: '1px solid #96c1e8' }}/>
              </FormItem>
            </Col>
          </Row>
        </Form>
      </Modal>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    tableData: state.get('getBookRecommend')
  }
}
export default connect(mapStateToProps)(PasswordReset)